<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">


        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>


        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div id="event-handling" class="tutorial">

            <h2>Event handling</h2>

            <p>As mentioned, JointJS library is based on the Backbone MVC library. So let's try some Backbone stuff now. For
                instance, let's see all the events
                triggered by any model in the graph:
            <pre><code>graph.on('all', function(eventName, cell) {
    console.log(arguments);
});</code></pre>
            To see the triggered events, open the browser console and make some changes to the paper above: Move the
            rectangles around,
            create a new vertex by dragging the link, remove a vertex, disconnect the link by dragging the highlighted
            arrowhead, remove the link, ...

            <p>You can also react on a specific event on a particular model:
            <pre><code>rect.on('change:position', function(element) {
    console.log(element.id, ':', element.get('position'));
});</code></pre>

            Please see the <a href="/docs/jointjs/v1.0/joint.html" target="_top">API reference</a> for a list of events that you can react on for models (<code>joint.dia.Element</code>,
            <code>joint.dia.Link</code> and <code>joint.dia.Graph</code>) and views (<code>joint.dia.Paper</code>).

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>

    </body>
</html>
